<template>
  <div>
    <div class="filter-container">
      <!--字典类别key搜索   @keyup.enter.native="page1SearchPageList" 表示按回车进行搜索 page1SearchPageList是搜索方法 -->
      <el-input
        v-model="search.yg_name"
        placeholder="姓名"
        class="filter-item search_input"
        @keyup.enter.native="page1SearchPageList"
      />
      <el-select v-model="search.depart_name" placeholder="部门">
        <el-option label="CEO" value="CEO"></el-option>
        <el-option label="财务部" value="财务部"></el-option>
        <el-option label="运营部" value="运营部"></el-option>
        <el-option label="人事部" value="人事部"></el-option>
        <el-option label="策划部" value="策划部"></el-option>
      </el-select>
      <el-select v-model="search.zhiwei_name" placeholder="职位">
        <el-option label="董事长" value="董事长"></el-option>
        <el-option label="财务部部长" value="财务部部长"></el-option>
        <el-option label="运营部长" value="运营部长"></el-option>
        <el-option label="人事部长" value="人事部长"></el-option>
        <el-option label="策划部长" value="策划部长"></el-option>
      </el-select>
      <el-col :span="4">
        <el-date-picker
          type="date"
          placeholder="到岗日期"
          v-model="search.daogangtime"
          style="width: 100%"
        ></el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-date-picker
          type="date"
          placeholder="合同签署日期"
          v-model="search.hetongtime"
          style="width: 100%"
        ></el-date-picker>
      </el-col>
      <el-select v-model="search.shenpizt" placeholder="审批状态">
        <el-option label="待审批" value="待审批"></el-option>
        <el-option label="已同意" value="已同意"></el-option>
        <el-option label="已拒绝" value="已拒绝"></el-option>
      </el-select>
      <!--搜索按钮 icon="el-icon-search" 代表按钮要显示的小图标    @click="page1SearchPageList" 代表点击执行搜索方法 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="page1SearchPageList"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="success"
        icon="el-icon-edit"
        @click="ddtCreateShow"
      >
        添加
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="danger"
        icon="el-icon-edit"
        @click="ddtCreatedelall"
      >
        批量删除
      </el-button>
    </div>

    <el-table
      ref="delalldec"
      :data="list"
      style="width: 100%"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="yg_name" label="姓名"> </el-table-column>
      <el-table-column prop="depart_name" label="部门"> </el-table-column>
      <el-table-column prop="zhiwei_name" label="职位"> </el-table-column>
      <el-table-column prop="shangjipeo" label="上级负责人"> </el-table-column>
      <el-table-column prop="ruzhitime" label="入职日期"> </el-table-column>
      <el-table-column prop="shenpizt" label="审批状态"> </el-table-column>
      <el-table-column prop="shenpipeo" label="审批人"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handledel(scope.row.id)" type="text" size="small"
            >删除</el-button
          >
          <el-button @click="handleClick(scope.row.id)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.maxResultCount"
      :pageSizes="[5, 10, 15, 20]"
      @pagination="searchPageList"
    />

    <el-dialog :title="dialogTitleupdate" :visible.sync="dialogFormVisibles">
      <el-form
        :rules="rules"
        :model="tableData"
        label-position="right"
        label-width="120px"
      >
        <el-row>
          <el-form-item label="🍁部门">
            <el-select v-model="tableData.depart_name" placeholder="部门">
              <el-option label="CEO" value="CEO"></el-option>
              <el-option label="财务部" value="财务部"></el-option>
              <el-option label="运营部" value="运营部"></el-option>
              <el-option label="人事部" value="人事部"></el-option>
              <el-option label="策划部" value="策划部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="🍁职位">
            <el-select v-model="tableData.zhiwei_name" placeholder="职位">
              <el-option label="董事长" value="董事长"></el-option>
              <el-option label="财务部部长" value="财务部部长"></el-option>
              <el-option label="运营部长" value="运营部长"></el-option>
              <el-option label="人事部长" value="人事部长"></el-option>
              <el-option label="策划部长" value="策划部长"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="🍁员工姓名">
            <el-select v-model="tableData.yg_name" placeholder="员工姓名">
              <el-option label="张晓刚" value="张晓刚"></el-option>
              <el-option label="李四" value="李四"></el-option>
              <el-option label="王五" value="王五"></el-option>
              <el-option label="赵六" value="赵六"></el-option>
              <el-option label="周七" value="周七"></el-option>
            </el-select>
          </el-form-item>
          <el-col :span="10">
            <el-form-item label="🍁上级负责人">
              <el-select
                v-model="tableData.shangjipeo"
                placeholder="上级负责人"
              >
                <el-option label="张晓刚" value="张晓刚"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="🍁入职日期">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="tableData.ruzhitime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="tableData.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateDictType()"> 保存 </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>


  <script>
import {
  dttGetAll,
  del,
  delAll,
  pagess,
  Eintyess,
} from "@/api/system_base/Hired_handle";
import Pagination from "@/components/Pagination"; // 引入分页组件

export default {
  components: { Pagination },
  data() {
    return {
      tableData: [],
      list: null, //表格绑定数据
      listLoading: true, //是否显示加载提示
      total: 0, //总行数
      search: {
        //搜索对象
        page: 1, //当前页
        maxResultCount: 5, //每页多少条
        skipCount: 0, //当前页第一条记录位置  用于abp接口
        depart_name: "",
        zhiwei_name: "",
        yg_name: "",
        daogangtime: "",
        shenpizt: "",
        hetongtime: "",
        ruzhitime: "",
        latetime: "",
        shenqingtime: "",
      },
      dialogTitle: "", // 弹出层标题
      dialogFormVisibles: false,
      dialogTitleupdate: "",
      dialogStatus: "1", // 等于1 表示是添加操作   不等于1 表示修改操作
      dicTypInfo: {},
    };
  },
  created() {
    this.searchPageList();
  },
  methods: {
    searchPageList() {
      // 搜索方法
      this.listLoading = true; // 显示加载效果

      this.search.skipCount =
        (this.search.page - 1) * this.search.maxResultCount;

      dttGetAll(this.search).then((response) => {
        // 调用分页接口
        this.list = response.result.items; // 将查询结果赋值给list
        this.listLoading = false; // 隐藏加载效果
        this.total = response.result.totalCount; // 赋值总行数
      });
    },
    page1SearchPageList() {
      // 点击搜索
      // 搜索方法
      this.search.page = 1; // 将当前页设置为第一页
      this.searchPageList(); // 调用搜索分页方法
    },
    ddtCreateShow() {
      this.$router.push("/ruzhia");
    },
    handledel(id) {
      if (confirm("确认删除数据吗？")) {
        del(id).then((res) => {
          this.$message.success("删除成功");
          this.page1SearchPageList();
        });
      }
    },
    ddtCreatedelall() {
      var arid = [];
      var id = this.$refs.delalldec.selection;
      id.forEach((res) => {
        arid.push(res.id);
      });

      if (arid.length == 0) {
        this.$message("请选择要删除的数据");
        return;
      }

      if (confirm("确认要删除数据嘛？")) {
        arid.forEach((res) => {
          var dd = res;
          delAll(dd).then((res) => {
            this.page1SearchPageList();
          });
          this.$message.success("批删成功");
        });
      }
    },
    handleClick(id) {
      this.dialogFormVisibles = true;
      pagess(id).then((r) => {
        console.log("r", r);
        if (r.result != null) {
          var that = this;
          that.tableData = r.result;
        }
      });
    },
    updateDictType() {
      Eintyess(this.tableData).then((r) => {
        this.dialogFormVisibles = false;
        this.searchPageList();
        this.$notify({
          title: "修改成功",
          message: "修改物资信息成功",
          type: "success",
          duration: 2000,
        });
      });
    },
  },
};
</script>

<style >
.search_input {
  width: 200px;
}
</style>